<template>
    <div>
        <!-- 这是轮播图区域 -->
        <mt-swipe :auto="4000">
  <mt-swipe-item v-for="item in lunbotuList" :key="item.url"><img :src="item.img" alt=""></mt-swipe-item>
 </mt-swipe>
<!-- 九宫格 -->
 <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">Home</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">Email</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">Setting</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">about</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">more</div></a></li>
		        </ul> 
		</div>
    </div>
</template>
<script>
import{Toast} from 'mint-ui'
export default {
    data(){
        return{
            // 保存轮播图
            lunbotuList:[]
        }
    },
    created(){
        this.getLinbotu()
    },
    methods:{
        getLinbotu(){
            this.$http.get("#").then(result=>{
                成功的
                if(result.body.status === 0){
                    this.lunbotuList = result.body.message;
                }else{
                    Toast('加载轮播图失败')
                }

            });
        }
    }
    
}
</script>
<style lang="less" scoped>
.mint-swipe{
    height: 200px;
    .mint-swipe-item{
        // background-color: red;
        &:nth-child(1){
            background-color: red;
        }
         &:nth-child(2){
            background-color: yellow;
        }
         &:nth-child(3){
            background-color: blue;
        }
    }
    }
    img{
        width: 100%;
        height: 100%;
    }
    


</style>



